layout_catalog by enot333lol333-coder · Pull Request #6290 · mate-academy/layout_catalog

enot333lol333-coder · 2026-06-28T12:58:29Z

DEMO LINK
TEST REPORT LINK
All components follow BEM and use SCSS
Repeated sizes and special colors are put to variables
Grid is used for the columns
Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
All changes on :hover are smooth
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Review Summary

I am requesting changes because there are still a couple of checklist-level issues that are considered critical blockers for this task. First, the header border color #e5e5e5 is used as a raw hex value in your styles (e.g. _header.scss, index.scss), but the checklist requires that special colors be stored in variables [CHECKLIST ITEM #2]; you should define something like $color-header-border in src/styles/variables.scss and use that variable wherever this border color appears. Second, the catalog padding requirement is not fully met: .catalog correctly has padding: 50px 40px;, but .catalog__grid adds padding: 30px; (see src/styles/_catalog.scss and related compiled styles), which changes the effective visible padding of the cards container and violates the spec that the catalog container must have fixed paddings of 50px vertically and 40px horizontally. Please remove or adjust the inner grid padding so that the visible catalog container padding remains exactly 50px 40px as required. Aside from these issues, your semantic structure, BEM/SCSS usage, grid layout, hover effects, and data-qa attributes look solid, so once you fix the color variable and catalog padding, your solution should be ready to pass.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

@@ -1,27 +1,240 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">


This line uses a hard-coded special color #e5e5e5, which conflicts with checklist item #2: "Repeated sizes and special colors are put to variables". Consider adding a variable for this color in variables.scss and using that variable here.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

-      rel="preconnect"
-      href="https://fonts.gstatic.com"
-    />
+    <title>Moyo Catalog</title>


The description requires the catalog (cards container) to have fixed paddings 50px vertically and 40px horizontally. Adding padding: 30px; on the inner grid changes the effective padding of the container, so this violates that requirement. Consider removing this padding or adjusting the structure so the catalog container’s visible padding remains 50/40 as specified.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

@@ -0,0 +1,92 @@
+.card {
+  width: $card-width;


The header border color #e5e5e5 is a special color that should be moved into a SCSS variable, per checklist item: "Repeated sizes and special colors are put to variables." Consider adding it to variables.scss and using that variable here.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

+  transition: transform $transition;
+
+  &__image {
+    width: 100%;


catalog is defined as the container with padding 50px 40px, but catalog__grid adds an extra padding: 30px;, which changes the effective container padding. This conflicts with the requirement: "cards container(catalog) have fixed paddings (50px vertically and 40px horizontally)." Remove or adjust this inner padding so the catalog container’s padding matches the spec.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

@@ -0,0 +1,24 @@
+.catalog {
+  padding: 50px 40px;


In _header.scss, the border color #e5e5e5 is a special color but not stored in a SCSS variable, which violates checklist item: Repeated sizes and special colors are put to variables. Consider adding a variable (e.g. $color-border) in variables.scss and using it here.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

+  &__grid {
+    display: grid;
+    gap: 46px 48px;
+    padding: 30px;


In _catalog.scss, the inner grid has padding: 30px, while the requirement says cards container(catalog) have fixed paddings (50px vertically and 40px horizontally). Because .catalog already has padding: 50px 40px, this extra grid padding contradicts the specification; update or remove it so the catalog container padding matches the description.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

+.nav {
+  &__list {
+    display: flex;
+    align-items: center;
+    gap: 40px;
+    list-style: none;
+    margin: 0;
+    padding: 0;


To fully satisfy checklist item "Repeated sizes and special colors are put to variables", consider adding a variable for the header border color (currently hardcoded as #e5e5e5 in _header.scss) here, e.g. $color-header-border, and then use that variable in the header styles.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

@@ -1,3 +1,12 @@
+@import 'variables';
+


The use of #e5e5e5 as a raw hex color violates checklist item #2: "Repeated sizes and special colors are put to variables". Move this color into variables.scss (e.g. $color-header-border) and reference the variable here instead of the hardcoded value.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

+  background: $color-bg;
 }
+
+@import 'header';


catalog already has padding: 50px 40px; to satisfy the requirement that "cards container(catalog) have fixed paddings (50px vertically and 40px horizontally)". Adding padding: 30px; on .catalog__grid changes the effective container padding and conflicts with that requirement. Remove or adjust this inner padding so the catalog container’s visible padding remains 50/40 as specified.

mateacademy-ai-mentor · 2026-06-28T12:59:49Z

@@ -0,0 +1,8 @@
+$color-primary: #00acdc;
+$color-dark: #060b35;


Using the literal color #e5e5e5 here breaks checklist item: "Repeated sizes and special colors are put to variables". Consider defining a SCSS variable for this border color in variables.scss and using that variable instead.

mateacademy-ai-mentor

Review Summary

Your solution is approved because it fully implements the catalog page as described: header, navigation, and main catalog are correctly structured with semantic HTML, and BEM + SCSS are consistently used for header, nav, card, and the stars section. All required checklist items are satisfied, including the use of SCSS variables for special colors and repeated sizes (such as the header border color, card width, and 300ms transition), the CSS Grid layout with 1/2/3/4 responsive columns, and the exact catalog padding of 50px 40px without extra inner padding. Interactive behavior matches the specification: cards scale by 20% on hover without breaking the grid, card titles change to the required hover color, nav links use the correct default and hover colors, and the Buy button hover state swaps background and text colors smoothly over the shared transition. The required data-qa attributes (nav-hover, card, card-hover) and the is-active class on the first nav link are correctly applied, and the catalog is wrapped in <main> as required. The failing BackstopJS visual test in CI is due to missing committed reference images, not a defect in your implementation, so it should not block this task. Nice work tightening up the layout, variables, and hover effects to align with all the functional and checklist requirements.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

enot333lol333-coder added 3 commits June 28, 2026 15:38

Add catalog page with BEM and SCSS

efc4566

Add SCSS variables

b08370a

Fix stars rating

92e2d53

mateacademy-ai-mentor suggested changes Jun 28, 2026

View reviewed changes

Fix color variables and catalog padding

e91c23e

enot333lol333-coder requested a review from mateacademy-ai-mentor June 28, 2026 13:03

mateacademy-ai-mentor suggested changes Jun 28, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

layout_catalog#6290

layout_catalog#6290
enot333lol333-coder wants to merge 4 commits into
mate-academy:masterfrom
enot333lol333-coder:master

enot333lol333-coder commented Jun 28, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor Jun 28, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,8 @@
		$color-primary: #00acdc;
		$color-dark: #060b35;

Uh oh!

Conversation

enot333lol333-coder commented Jun 28, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants